<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-row :gutter="8">
      <a-col :span="12">
        <a-card>
          <a-form ref="roleFormQueryRef" :model="roleFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
            <a-row :gutter="16" v-show="!roleFormQueryVisible">
              <a-col :span="8">
                <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
                  <a-input-search v-model:value="roleFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="roleFormQuerySubmitting" @search="roleFormQuerySearch" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
                  <Dict v-model="roleFormQueryModel.roleType" dictKey="roleTypeSearch" formItemName="roleType" @change="roleRoleTypeDictSelectChange" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="roleFormQueryUpDown">
                  展开
                  <CoreIcon icon="akar-icons:chevron-down" :size="14" />
                </a-button>
              </a-col>
            </a-row>
            <a-row :gutter="16" v-show="roleFormQueryVisible">
              <a-col :span="8">
                <a-form-item>
                  <a-input-search v-model:value="roleFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="roleFormQuerySubmitting" @search="roleFormQuerySearch" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item>
                  <Dict v-model="roleFormQueryModel.roleType" dictKey="roleTypeSearch" formItemName="roleType" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
              </a-col>
              <a-col :span="8">
                <a-form-item label="角色名称">
                  <a-input v-model:value="roleFormQueryModel.roleNameAndLike" placeholder="输入角色名称" />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-item label="角色类型">
                  <a-input v-model:value="roleFormQueryModel.roleTypeAndLike" placeholder="输入角色类型" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="描述">
                  <a-input v-model:value="roleFormQueryModel.descriptionAndLike" placeholder="输入描述" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="排序权重">
                  <a-input-number v-model:value="roleFormQueryModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
                </a-form-item>
              </a-col> -->
              <a-col :span="24">
                <a-space :style="{ ...coreStyle.floatRight }">
                  <a-button @click="roleFormQueryReset">
                    <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                    重置
                  </a-button>
                  <a-button type="primary" ghost :loading="roleFormQuerySubmitting" @click="roleFormQuerySearch">
                    <CoreIcon icon="ant-design:search-outlined" :size="14" />
                    查询
                  </a-button>
                  <a-button type="link" @click="roleFormQueryUpDown">
                    收起
                    <CoreIcon icon="akar-icons:chevron-up" :size="14" />
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
          </a-form>
          <a-space>
            <a-button type="primary" ghost @click="roleAdd">
              <CoreIcon icon="carbon:add-alt" :size="14" />
              新增
            </a-button>
            <a-button type="dashed" @click="roleUpdate" v-if="roleListSelectLength === 1">
              <CoreIcon icon="ri:brush-line" :size="14" />
              修改
            </a-button>
            <a-popconfirm title="确认删除？" placement="bottom" @confirm="roleDelete" v-if="roleListSelectLength > 0">
              <a-button type="dashed" danger>
                <CoreIcon icon="jam:delete" :size="14" />
                删除
              </a-button>
            </a-popconfirm>
            <a-button @click="roleDetailInfo" v-if="roleListSelectLength === 1">
              <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
              详情
            </a-button>
          </a-space>
          <a-space :style="{ ...coreStyle.floatRight }">
            <a-button type="link" shape="circle" @click="roleListGetDataSet">
              <CoreIcon icon="ci:refresh" :size="22" />
            </a-button>
          </a-space>
          <a-table
            rowKey="id"
            :columns="roleListColumns"
            :data-source="roleListDataSet"
            :loading="roleListLoading"
            :pagination="false"
            bordered
            :customRow="roleListCustomRow"
            :row-selection="{ fixed: true, selectedRowKeys: roleListSelectedRowKeys, onChange: roleListRowOnChange }"
            :scroll="{ x: '100%', y: 550 }"
            :style="{ ...coreStyle.marginTop(10) }"
          >
            <template #roleTypeData="{ text }">
              <span>{{ coreToolStore.getDictDisplayName('roleType', text) }}</span>
            </template>
          </a-table>
          <a-pagination
            v-model:current="roleListDataPage"
            v-model:pageSize="roleListDataRows"
            :total="roleListDataCount"
            show-size-changer
            show-quick-jumper
            :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
            :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
            :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
            @change="roleListPaginationChange"
            @showSizeChange="roleListPaginationShowSizeChange"
            v-if="roleListPaginationVisible"
          >
          </a-pagination>
          <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!roleListPaginationVisible">
            {{ coreStyle.antdPaginationShowTotal(roleListDataCount) }}
          </p>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-spin :spinning="roleMenuTreeSpinning">
          <a-card>
            <a-tabs v-model:activeKey="roleLoginSideTabsActiveKey" @change="roleLoginSideTabsChange">
              <a-tab-pane v-for="item in roleLoginSideTabsDictValueSet" :key="item.codeName" :tab="item.displayName"></a-tab-pane>
              <template #renderTabBar="{ DefaultTabBar, ...props }">
                <component
                  :is="DefaultTabBar"
                  v-bind="props"
                  :style="{ zIndex: 1, background: '#fff', textAlign: 'center' }"
                />
              </template>
            </a-tabs>
            <a-row>
              <a-col :span="3">
                <a-space direction="vertical" :size="10">
                  <a-button type="dashed" shape="circle" :disabled="toSaveAuthListDisabled" @click="roleMenuTreeSelectAll">
                    <CoreIcon icon="ant-design:check-outlined" :size="22" />
                  </a-button>
                  <a-button type="dashed" shape="circle" danger :disabled="toSaveAuthListDisabled" @click="roleMenuTreeDeselectAll">
                    <CoreIcon icon="ant-design:close-outlined" :size="22" />
                  </a-button>
                  <a-button type="primary" shape="circle" ghost :disabled="toSaveAuthListDisabled" :loading="toSaveAuthListLoading" @click="toSaveAuthList">
                    <CoreIcon icon="grommet-icons:send" :size="22" v-if="!toSaveAuthListLoading" />
                  </a-button>
                </a-space>
              </a-col>
              <a-col :span="21">
                <div :style="{ ...coreStyle.height(669) }">
                  <ScrollContainer>
                    <!-- <el-tree ref="roleMenuTreeRef" :data="roleMenuTreeData" :props="roleMenuTreeProps" node-key="name" empty-text="" :expand-on-click-node="false" check-on-click-node show-checkbox default-expand-all /> -->
                    <a-tree :tree-data="roleMenuTreeData" :selectable="false" checkable v-model:checkedKeys="roleMenuTreeCheckedKeys" v-model:expandedKeys="roleMenuTreeExpandedKeys" @check="roleMenuTreeCheckChange">
                    </a-tree>
                  </ScrollContainer>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-spin>
      </a-col>
    </a-row>
    <a-drawer
      v-model:visible="roleEditDrawerVisible"
      title="编辑角色信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="roleEditDrawerOnClose"
    >
      <a-form ref="roleFormRef" :model="roleFormModel" :rules="roleFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="角色名称 (不能重复)" name="roleName">
              <a-input v-model:value="roleFormModel.roleName" placeholder="输入角色名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="roleFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <!-- <a-form-item label="角色类型" name="roleType">
              <a-input v-model:value="roleFormModel.roleType" placeholder="输入角色类型" />
            </a-form-item> -->
            <Dict v-model="roleFormModel.roleType" dictKey="roleType" formItemName="roleType" />
          </a-col>
          <a-col :span="24">
            <a-form-item label="描述" name="description">
              <a-textarea v-model:value="roleFormModel.description" :rows="3" placeholder="输入描述" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="roleFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="roleFormSaveSubmitting" @click="roleFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="roleFormSaveSubmitting" @click="roleFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="roleDetailDrawerVisible"
      title="角色详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="角色名称" :span="1">{{ roleDetailModel.roleName }}</a-descriptions-item>
          <a-descriptions-item label="角色类型" :span="1">{{ coreToolStore.getDictDisplayName('roleType', roleDetailModel.roleType) }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="2">{{ roleDetailModel.weightOrder }}</a-descriptions-item>
          <a-descriptions-item label="描述" :span="2">{{ roleDetailModel.description }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="roleDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'
import type { CoreTree } from '/@/tool/CoreTree'

import { useRoleStore } from '/@/store/modules/cn/core/sign/roleStore'

import type { Role } from '/@/model/cn/core/sign/eo/Role'
import { toRole } from '/@/model/cn/core/sign/eo/Role'

import type { RoleQO } from '/@/model/cn/core/sign/qo/RoleQO'
import { toRoleQO } from '/@/model/cn/core/sign/qo/RoleQO'

import type { RoleVO } from '/@/model/cn/core/sign/vo/RoleVO'
import { toRoleVO } from '/@/model/cn/core/sign/vo/RoleVO'

import { useDictStore } from '/@/store/modules/cn/core/dict/dictStore'

import type { DictValue } from '/@/model/cn/core/dict/eo/DictValue'
import type { DictQO } from '/@/model/cn/core/dict/qo/DictQO'
import type { DictAndValueVO } from '/@/model/cn/core/dict/vo/DictAndValueVO'

import { useMenuStore } from '/@/store/modules/cn/core/sign/menuStore'

import type { Menu } from '/@/model/cn/core/sign/eo/Menu'
import { toMenu } from '/@/model/cn/core/sign/eo/Menu'

import type { MenuQO } from '/@/model/cn/core/sign/qo/MenuQO'
import { toMenuQO } from '/@/model/cn/core/sign/qo/MenuQO'

import type { MenuVO } from '/@/model/cn/core/sign/vo/MenuVO'
import { toMenuVO } from '/@/model/cn/core/sign/vo/MenuVO'

import type { RoleAO } from '/@/model/cn/core/sign/ao/RoleAO'

import { ScrollContainer } from '/@/components/Container/index'

import type { RoleMenuTreeVO } from '/@/model/cn/core/sign/vo/RoleMenuTreeVO'

@Options({
  name: 'CoreRole',
  components: {
    ScrollContainer,
  },
  computed: {
    ...mapStores(useCoreToolStore, useRoleStore, useDictStore, useMenuStore),
  },
})
export default class CoreRole extends Vue {

  roleListDataSet: Array<RoleVO> = []

  roleListColumns: Array<object> = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '角色类型',
      dataIndex: 'roleType',
      align: 'center',
      slots: { customRender: 'roleTypeData' },
      // ellipsis: true,
      // width: 200,
    },
    // {
    //   title: '描述',
    //   dataIndex: 'description',
    //   align: 'center',
    //   // ellipsis: true,
    //   // width: 200,
    // },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      width: 100,
    },
  ]

  roleListLoading: boolean = false

  roleListSelectedRowKeys: string[] = []

  roleListSelectData: Array<RoleVO> = []

  roleListSelectLength: number = 0

  roleListSelectCurrentRowIndex: number = -1

  roleListSelectCurrentRowData: RoleVO = toRoleVO()

  roleListPaginationVisible: boolean = true

  roleListDataPage: number = 1

  roleListDataRows: number = 10

  roleListDataCount: number = 0

  roleListRowOnChange(selectedRowKeys, selectedRows) {
    this.roleListSelectedRowKeys = [ ...selectedRowKeys ]
    this.roleListSelectData = [ ...selectedRows ]
    this.roleListSelectLength = selectedRows.length
  }

  roleListCustomRow(record, index) {
    return {
      'class': index === this.roleListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.roleListSelectCurrentRowIndex = index
        this.roleListSelectCurrentRowData = { ...record }
        // let selectedRowKeys = [ ...this.roleListSelectedRowKeys ]
        // let selectedRows = [ ...this.roleListSelectData ]
        // if (selectedRowKeys.includes(record.id)) {
        //   this.roleListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        // } else {
        //   selectedRowKeys.push(record.id)
        //   selectedRows.push(record)
        //   this.roleListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        // }
        this.roleMenuTreeGetDataSet()
      },
      onDblclick: (event) => {
        this.roleStore.pkVo(this.$toParam<RoleQO>({ id: this.roleListSelectCurrentRowData.id } as RoleQO)).then((res: Res<RoleVO>) => {
          if (res.succ) {
            this.roleDetailModel = { ...res.data[0] }
            this.roleDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  roleListGetDataSet() {
    this.roleListLoading = true
    this.roleListRowOnChange([], [])
    this.roleListSelectCurrentRowIndex = -1
    this.roleListSelectCurrentRowData = toRoleVO()
    this.roleMenuTreeData = []
    this.roleMenuTreeCheckedKeys = []
    this.roleMenuTreeHalfCheckedKeys = []
    this.roleMenuTreeExpandedKeys = []
    this.roleMenuTreeAllCheckedKeys = []
    this.roleStore.pagingVo(this.$toParam<RoleQO>({ weightOrderAsc: 'y' } as RoleQO, this.roleListDataPage, this.roleListDataRows)).then((res: Res<RoleVO>) => {
      if (res.succ) {
        this.roleListPaginationVisible = true
        this.roleListDataSet = [ ...res.data ]
        this.roleListDataCount = res.count
        setTimeout(() => { this.roleListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.roleListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.roleListLoading = false }, 500)
    })
  }

  roleListPaginationChange() {
    this.roleListGetDataSet()
  }

  roleListPaginationShowSizeChange() {
    this.roleListGetDataSet()
  }

  roleFormQueryVisible: boolean = false

  roleFormQuerySubmitting: boolean = false

  roleFormQueryModel: RoleQO = toRoleQO()

  roleFormQueryUpDown() {
    this.roleFormQueryVisible = !this.roleFormQueryVisible
  }

  roleFormQueryReset() {
    if (this.$refs.roleFormQueryRef) {
      this.$refs.roleFormQueryRef.resetFields()
      this.roleFormQueryModel = toRoleQO()
    }
  }

  roleFormQuerySearch() {
    this.roleFormQuerySubmitting = true
    this.roleListLoading = true
    this.roleListRowOnChange([], [])
    this.roleListSelectCurrentRowIndex = -1
    this.roleListSelectCurrentRowData = toRoleVO()
    this.roleMenuTreeData = []
    this.roleMenuTreeCheckedKeys = []
    this.roleMenuTreeHalfCheckedKeys = []
    this.roleMenuTreeExpandedKeys = []
    this.roleMenuTreeAllCheckedKeys = []
    this.roleStore.queryVo(this.$toParam<RoleQO>(this.$toSearch({ ...this.roleFormQueryModel }))).then((res: Res<RoleVO>) => {
      if (res.succ) {
        this.roleListPaginationVisible = false
        this.roleListDataSet = [ ...res.data ]
        this.roleListDataCount = res.count
        setTimeout(() => { this.roleFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.roleListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.roleFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.roleListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.roleFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.roleListLoading = false }, 500)
    })
  }

  roleRoleTypeDictSelectChange(value) {
    this.roleFormQuerySearch()
  }

  roleEditDrawerVisible: boolean = false

  roleFormSaveSubmitting: boolean = false

  roleFormSaveContinue: boolean = false

  roleFormModel: Role = toRole()

  roleFormRules: object = {
    roleName: [
      { type: 'string', required: true, message: '角色名称不能为空！', trigger: ['change', 'blur'] },
    ],
    roleType: [
      { type: 'string', required: true, message: '角色类型不能为空！', trigger: ['change', 'blur'] },
    ],
    // description: [
    //   { type: 'string', required: true, message: '描述不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  roleFormReset() {
    if (this.$refs.roleFormRef) {
      this.$refs.roleFormRef.resetFields()
      this.roleFormModel = toRole()
    }
  }

  roleFormSubmit() {
    this.roleFormSaveSubmitting = true
    this.$refs.roleFormRef.validate().then(() => {
      if (this.roleFormModel.id) {
        this.roleStore.update(this.$toParam<Role>(this.roleFormModel)).then((res: Res<Role>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.roleFormReset()
            this.roleFormSaveSubmitting = false
            if (!this.roleFormSaveContinue) {
              this.roleEditDrawerVisible = false
              this.roleListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.roleFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.roleFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.roleStore.save(this.$toParam<Role>(this.roleFormModel)).then((res: Res<Role>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.roleFormReset()
            this.roleFormSaveSubmitting = false
            if (!this.roleFormSaveContinue) {
              this.roleEditDrawerVisible = false
              this.roleListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.roleFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.roleFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.roleFormSaveSubmitting = false }, 3000)
    })
  }

  roleFormSave() {
    this.roleFormSaveContinue = false
    this.roleFormSubmit()
  }

  roleFormNextAdd() {
    this.roleFormSaveContinue = true
    this.roleFormSubmit()
  }

  roleAdd() {
    if (this.roleFormModel.id) {
      this.roleFormReset()
    }
    this.roleEditDrawerVisible = true
  }

  roleUpdate() {
    this.roleStore.pk(this.$toParam<RoleQO>({ id: this.roleListSelectData[0].id } as RoleQO)).then((res: Res<Role>) => {
      if (res.succ) {
        this.roleFormReset()
        this.roleFormModel = { ...res.data[0] }
        this.roleEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  roleEditDrawerOnClose() {
    if (this.roleFormSaveContinue) {
      this.roleFormSaveContinue = false
      this.roleListGetDataSet()
    }
  }

  roleDelete() {
    let param: Array<Role> = []
    this.roleListSelectData.forEach((eo: RoleVO) => {
      param.push({ id: eo.id } as Role)
    })
    this.roleStore.removeBatch(this.$toParam<Role>(param)).then((res: Res<Role>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.roleListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  roleDetailDrawerVisible: boolean = false

  roleDetailModel: RoleVO = toRoleVO()

  roleDetailInfo() {
    this.roleStore.pkVo(this.$toParam<RoleQO>({ id: this.roleListSelectData[0].id } as RoleQO)).then((res: Res<RoleVO>) => {
      if (res.succ) {
        this.roleDetailModel = { ...res.data[0] }
        this.roleDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  roleDetailUpdate() {
    this.roleStore.pk(this.$toParam<RoleQO>({ id: this.roleDetailModel.id } as RoleQO)).then((res: Res<Role>) => {
      if (res.succ) {
        this.roleFormReset()
        this.roleFormModel = { ...res.data[0] }
        this.roleDetailDrawerVisible = false
        this.roleEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  roleLoginSideTabsActiveKey: string = 'Browser'

  roleLoginSideTabsDictValueSet: Array<DictValue> = []

  roleLoginSideTabsChange(activeKey) {
    this.roleMenuTreeGetDataSet()
  }

  roleMenuTreeData: Array<CoreTree<any>> = []

  roleMenuTreeCheckedKeys: string[] = []

  roleMenuTreeHalfCheckedKeys: string[] = []

  roleMenuTreeExpandedKeys: string[] = []

  roleMenuTreeAllCheckedKeys: string[] = []

  // roleMenuTreeProps: object = {
  //   label: 'title',
  //   children: 'children',
  // }

  roleMenuTreeSpinning: boolean = false

  toSaveAuthListLoading: boolean = false

  roleMenuTreeGetDataSet() {
    this.roleMenuTreeSpinning = true
    this.roleMenuTreeData = []
    this.roleMenuTreeCheckedKeys = []
    this.roleMenuTreeHalfCheckedKeys = []
    this.roleMenuTreeExpandedKeys = []
    this.roleMenuTreeAllCheckedKeys = []
    this.roleStore.getRoleMenuTreeByRoleIdLoginSide(this.$toParam<RoleAO>({
      roleId: this.roleListSelectCurrentRowData.id,
      loginSide: this.roleLoginSideTabsActiveKey,
    } as RoleAO)).then((res: Res<RoleMenuTreeVO>) => {
      if (res.succ) {
        this.roleMenuTreeData = [ ...res.data[0].roleMenuTree ]
        this.roleMenuTreeCheckedKeys = [ ...res.data[0].checkedKeys ]
        this.roleMenuTreeHalfCheckedKeys = [ ...res.data[0].halfCheckedKeys ]
        this.roleMenuTreeExpandedKeys = [ ...res.data[0].expandedKeys ]
        this.roleMenuTreeAllCheckedKeys = [ ...res.data[0].allCheckedKeys ]
        setTimeout(() => { this.roleMenuTreeSpinning = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.roleMenuTreeSpinning = false }, 3000)
      }
    }).catch(err => {
      setTimeout(() => { this.roleMenuTreeSpinning = false }, 3000)
    })
  }

  roleMenuTreeCheckChange(checkedKeys, {halfCheckedKeys}) {
    this.roleMenuTreeHalfCheckedKeys = [ ...halfCheckedKeys ]
  }

  // roleMenuTreeGetDataSet() {
  //   this.roleMenuTreeSpinning = true
  //   this.roleMenuTreeData = []
  //   this.menuStore.getMenuTreeDataByLoginSide(this.$toParam<MenuQO>({ loginSide: this.roleLoginSideTabsActiveKey, weightOrderAsc: 'y' } as MenuQO)).then((res: Res<CoreTree<any>>) => {
  //     if (res.succ) {
  //       this.roleMenuTreeData = [ ...res.data ]
  //       this.roleStore.getAuthListByRoleIdLoginSide(this.$toParam<RoleAO>({
  //         roleId: this.roleListSelectCurrentRowData.id,
  //         loginSide: this.roleLoginSideTabsActiveKey,
  //       } as RoleAO)).then((res: Res<string>) => {
  //         if (res.succ) {
  //           res.data.forEach((eo: string) => {
  //             this.$refs.roleMenuTreeRef.setChecked(eo, true, false)
  //           })
  //           setTimeout(() => { this.roleMenuTreeSpinning = false }, 500)
  //         } else {
  //           this.$message.error(res.msg, 6)
  //           setTimeout(() => { this.roleMenuTreeSpinning = false }, 3000)
  //         }
  //       }).catch(err => {
  //         setTimeout(() => { this.roleMenuTreeSpinning = false }, 3000)
  //       })
  //     } else {
  //       this.$message.error(res.msg, 6)
  //       setTimeout(() => { this.roleMenuTreeSpinning = false }, 3000)
  //     }
  //   }).catch(err => {
  //     setTimeout(() => { this.roleMenuTreeSpinning = false }, 3000)
  //   })
  // }

  roleMenuTreeSelectAll() {
    // this.$refs.roleMenuTreeRef.setChecked("0", true, true)
    this.roleMenuTreeCheckedKeys = [ ...this.roleMenuTreeAllCheckedKeys ]
    this.roleMenuTreeHalfCheckedKeys = []
  }

  roleMenuTreeDeselectAll() {
    // this.$refs.roleMenuTreeRef.setChecked("0", false, true)
    this.roleMenuTreeCheckedKeys = []
    this.roleMenuTreeHalfCheckedKeys = []
  }

  toSaveAuthList() {
    this.toSaveAuthListLoading = true
    this.roleStore.saveAuthList(this.$toParam<RoleAO>({
      roleId: this.roleListSelectCurrentRowData.id,
      loginSide: this.roleLoginSideTabsActiveKey,
      // authList: [ ...this.$refs.roleMenuTreeRef.getCheckedKeys(), ...this.$refs.roleMenuTreeRef.getHalfCheckedKeys() ],
      authList: [ ...new Set([ ...this.roleMenuTreeCheckedKeys, ...this.roleMenuTreeHalfCheckedKeys ]) ],
    } as RoleAO)).then((res: Res<Role>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        setTimeout(() => { this.toSaveAuthListLoading = false }, 1000)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.toSaveAuthListLoading = false }, 3000)
      }
    }).catch(err => {
      setTimeout(() => { this.toSaveAuthListLoading = false }, 3000)
    })
  }

  get toSaveAuthListDisabled() {
    return this.roleLoginSideTabsActiveKey && this.roleListSelectCurrentRowData.id ? false : true
  }

  mounted() {
    this.dictStore.getDictAndValueByDictKey(this.$toParam<DictQO>({ dictKey: 'loginSide' } as DictQO)).then((res: Res<DictAndValueVO>) => {
      if (res.succ) {
        this.roleLoginSideTabsDictValueSet = [ ...res.data[0].dictValue ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.roleListGetDataSet()
    // this.roleMenuTreeGetDataSet()
  }

}
</script>

<style scoped lang="less">

</style>
